﻿@using HCMS.Dictionary
@{
    Layout = "~/Views/Shared/_Layout_Pear_Layui.cshtml";
}

<div class="layui-card">
    <div class="layui-card-body layui-current-form">
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline" style="min-width:80px;">
                    <div class="layui-input-inline" style="width:80px;">
                        <select id="status">
                            <option value="9999" selected>状态</option>
                            @foreach (var item in new DictCommon().StatusItems())
                            {
                                <option value="@item.Value">@item.Text</option>
                            }
                        </select>
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <div class="layui-input-inline layui-form-group">
                        <select id="searchName" name="searchName">
                            <option value="name">名称</option>
                            <option value="displayName">显示名称</option>
                        </select>
                        <input type="text" id="searchKey" placeholder="" class="layui-input layui-form-group-input" autocomplete="off">
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="btn-query" style="margin-right:4px;">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary" lay-filter="btn-reset">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/html" id="toolbar">
    <vc:menu-button action-names="@(new string[]{"add"})"></vc:menu-button>
</script>

<div class="layui-card">
    <div class="layui-card-body">
        <table id="tableList" lay-filter="tableList"></table>
    </div>
</div>

<script type="text/html" id="actionBox">
    {{# if(d.id != 0) {}}
    <vc:menu-a action-names="@(new string[]{"edit"})"></vc:menu-a>
    {{# }}}

    {{# if(d.id === 0 || d.typeId == 1) {}}
    <vc:menu-a action-names="@(new string[]{"addChildren"})"></vc:menu-a>
    {{# }}}
</script>

<partial name="~/views/shared/partial/_list_statustemp.cshtml" />

@section Scripts {
    <script>
        layui.use(['table', 'treeTable', 'form', 'jquery', 'util'], function () {
            let table = layui.table;
            let treeTable = layui.treeTable;
            let form = layui.form;
            let $ = layui.jquery;
            let util = layui.util;

            loadList();
            search();
            toolbar();
            tableActionTool();

            // 列表
            function loadList() {
                treeTable.render({
                    elem: '#tableList',
                    url: '/menu/list/',
                    method: 'post',
                    where: getQueryParams(),
                    height: 'full',
                    page: false,
                    cols: [[
                        { field: 'id', title: 'ID', width: 80 },
                        { field: 'name', title: '名称', width: 320, templet: function (d) { 
                            var result = [];
                            if (d.icon) { 
                                result.push('<i class="' + d.icon + '"></i>');                 
                            }
                            result.push(d.name);
                            return result.join(' ');
                        } },
                        { field: 'status', title: '状态', align: 'center', width: 90, templet: '#status_Temp' },
                        { title: '操作', toolbar: '#actionBox', width: 260, style: 'height: 40px;' },
                        { field: 'updateTime', title: '更新 时间', align: 'center', width: 160, templet: function (d) { return d.id === 0 ? '' : util.toDateString(d.updateTime); } },
                        { field: 'updateUser', title: '更新 人', align: 'center', width: 100 },
                        { field: 'createTime', title: '创建 时间', align: 'center', width: 160, templet: function (d) { return d.id === 0 ? '' : util.toDateString(d.createTime); } },
                        { field: 'createUser', title: '创建 人', align: 'center', width: 100 },
                    ]],
                    skin: 'line',
                    toolbar: '#toolbar',
                    defaultToolbar: [{
                        title: '刷新',
                        layEvent: 'refresh',
                        icon: 'layui-icon-refresh',
                    }, 'filter'],
                    tree:{
                        view: {
                            showIcon: false // 不显示节点图标
                        }
                    }
                });
            }

            // 搜索
            function search() {
                form.on('submit(btn-query)', function (data) {
                    table.reload('tableList', {
                        where: getQueryParams(),
                        page: {
                            curr: 1
                        }
                    });
                    return false;   // 阻止默认 form 跳转
                });
            }

            // 搜索条件
            function getQueryParams() {
                return {
                    status: $('#status').val(),
                    searchName: $('#searchName').val(),
                    searchKey: $('#searchKey').val()
                };
            }

            // 工具栏
            function toolbar() {
                table.on('toolbar(tableList)', function (obj) {
                    switch (obj.event) {
                        case 'add': add(); break;
                    }
                });

                function add() {
                    layer.open({
                        type: 2,
                        title: '添加 菜单',
                        area: ['85%', '85%'],
                        content: '/menu/add/'
                    });
                }
            }

            // 表格项 操作按钮
            function tableActionTool() {
                table.on('tool(tableList)', function (obj) {
                    switch (obj.event) {
                        case 'edit': edit(obj); break;
                        case 'addChildren': addChildren(obj); break;
                    }
                });

                // 编辑
                function edit(obj) {
                    layer.open({
                        type: 2,
                        title: '修改 ID：' + obj.data['id'],
                        area: ['85%', '85%'],
                        content: '/menu/edit/?id=' + obj.data['id']
                    });
                }

                // 添加子级
                function addChildren(obj) {
                    layer.open({
                        type: 2,
                        title: '添加 [' + obj.data['name'] + '] 子级',
                        area: ['85%', '85%'],
                        content: '/menu/addchildren/?parentId=' + obj.data['id']
                    });
                }
            }
        });
    </script>
}